<template>
	<view class="w-full" style="color: #636363;">
		<view class="w-full border-b text-white p-2 box-border flex gap-10" style="border-color: #303030;">
			<view :class="{active:active=='市价'}" class="pb-1 cursor-pointer" @click="clickTab('市价')">{{$t('bibi.shijia')}}</view>
			<view :class="{active:active=='限价'}" class="pb-1 cursor-pointer" @click="clickTab('限价')">{{$t('bibi.xianjia')}}</view>
		</view>
		<view class="flex p-2 justify-between">
			<view class="p-2 flex flex-col gap-6 flex-1">
				<view><el-input v-model="usdt.input" :placeholder="$t('bibi.zzjscjgcj')" size="large"/></view>
				<view>
					<el-input v-model="usdt.num" :min="0" placeholder="Please input" size="large" type="number">
					    <template #append>
							<view class="text-white">USDT</view>
						</template>
					</el-input>
				</view>
				<view class="p-4">
					<el-slider v-model="usdt.slider" :step="25"  :marks="{0:'0',100:'100%'}"/>
				</view>
				<view class="text-md p-2">
					<view class="flex w-full justify-between">
						<view>{{$t('bibi.weituozongzhi')}}</view>
						<view class="text-white">0 USDT</view>
					</view>
					<view class="flex w-full justify-between">
						<view>{{$t('bibi.shuliang')}}</view>
						<view class="text-white">0 ETH</view>
					</view>
					<view class="flex w-full justify-between">
						<view>{{$t('bibi.keyongyue')}}</view>
						<view class="text-white">0 USDT</view>
					</view>
				</view>
				<el-button type="primary" color="#60c08c" round size="large" style="color: #fff;">{{$t('bibi.mai')}} ETH</el-button>
			</view>
			<view class="line"></view>
			<view class="p-2 flex flex-col gap-6 flex-1">
				<view><el-input v-model="eth.input" :placeholder="$t('bibi.zzjscjgcj')" size="large"/></view>
				<view>
					<el-input v-model="eth.num" :min="0" placeholder="Please input" size="large" type="number">
					    <template #append>
							<view class="text-white">ETH</view>
						</template>
					</el-input>
				</view>
				<view class="p-4">
					<el-slider v-model="eth.slider" :step="25"  :marks="{0:'0',100:'100%'}"/>
				</view>
				<view class="text-md p-2">
					<view class="flex w-full justify-between">
						<view>{{$t('bibi.weituozongzhi')}}</view>
						<view class="text-white">0 USDT</view>
					</view>
					<view class="flex w-full justify-between">
						<view>{{$t('bibi.shuliang')}}</view>
						<view class="text-white">0 ETH</view>
					</view>
					<view class="flex w-full justify-between">
						<view>{{$t('bibi.keyongyue')}}</view>
						<view class="text-white">0 USDT</view>
					</view>
				</view>
				<el-button type="primary" color="#bb4965" round size="large">{{$t('bibi.maim')}} ETH</el-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				active:'市价',
				usdt:{
					input:'',
					num:0,
					slider:0,
				},
				eth:{
					input:'',
					num:0,
					slider:0,
				}
			}
		},
		components:{},
		computed: {
			...mapState({
				mode: state => state.app.mode,
				sysConfig: state => state.app.sysConfig,
			})
		},
		mounted() {},
		methods: {
			clickTab(name){
				this.active = name
			}
		}
	}
</script>

<style scoped lang="scss">
	.active {
		border-bottom: 2px solid #fff;
	}
	.line{
		width: 1px;border-right: 1px solid #303030;
	}
</style>